<template>
  <!-- <div class="login-container">
    <div class="login-box">
      <div class="imgBox">
        <img src="@/assets/login.png">
      </div>
    </div>
  </div> -->
  <div class="login_bg">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <el-form-item label="手机号" prop="username" style="position: relative">
        <img
          src="../../../assets/icon/ipnoe_icon.png"
          alt=""
          class="input-img"
        >
        <el-input
          ref="username"
          v-model="loginForm.username"
          style="width: 300px"
          placeholder="请输入手机号"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="off"
        />
      </el-form-item>

      <el-tooltip
        v-model="capsTooltip"
        content="Caps lock is On"
        placement="right"
        manual
      >
        <el-form-item label="密码" prop="password" style="position: relative">
          <img
            src="../../../assets/icon/password_icon.png"
            alt=""
            class="input-img"
          >
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            style="width: 300px"
            show-password
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            autocomplete="off"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleLogin"
          />
          <!-- <span class="show-pwd" @click="showPwd">
            <svg-icon
              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
            />
          </span> -->
        </el-form-item>
      </el-tooltip>

      <!-- <el-form-item prop="verCode">
      <el-row>
        <el-col :span="16">
          <el-input
            ref="verCode"
            v-model="loginForm.verCode"
            placeholder="请输入验证码"
            name="verCode"
            type="text"
            tabindex="1"
            autocomplete="off"
          />
        </el-col>
        <el-col :span="8">
          <div class="verCodeBox">123</div>
        </el-col>
      </el-row>
    </el-form-item> -->
      <el-form-item>
        <el-checkbox
          v-model="rememberPass"
          class="rememberPass"
        >记住密码</el-checkbox>
      </el-form-item>
      <el-button
        class="submitBtn"
        :loading="loading"
        type="primary"
        style="margin-bottom: 30px"
        @click.native.prevent="handleLogin"
      >登录</el-button>

      <p v-if="channel !== 'nicemama' && channel !== 'jzwy'" class="tc footer">
        若继续，则表示同意
        <a class="c_33" @click="showModal('private')">隐私政策</a> 和
        <a class="c_33" @click="showModal('useItems')">使用条款</a>
        <!--<el-link class="ml5 vm" type="primary" style="vertical-align: bottom;" @click="$router.push('/user/register')">去注册</el-link>-->
      </p>
      <el-dialog
        :title="`${modalType === 'private' ? '隐私政策' : '使用条款'}`"
        :visible="modalVisible"
        append-to-body
        modal-append-to-body
        @close="modalVisible = false"
      >
        <iframe
          :src="src"
          width="100%"
          height="500px"
          name="demo"
          scrolling="auto"
          sandbox="allow-same-origin allow-scripts"
        />
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate'

export default {
  name: 'Login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      modalType: '', // 弹窗类型
      modalVisible: false, // 弹窗显示
      loginForm: {
        username: '',
        password: '',
        verCode: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
        // verCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
      },
      rememberPass: true,
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      otherQuery: {},

      src: '',
      channel: process.env.VUE_APP_CHANNEL
    }
  },
  created () {
    // window.addEventListener('storage', this.afterQRScan)
  },
  mounted () {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  destroyed () {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    checkCapslock (e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
    },
    // 查看使用条例和隐私政策
    showModal (type) {
      console.log(type)
      if (type === 'useItems') {
        this.src = 'https://res.xxwbaby.com/public/agreement/user_agree.html'
      } else {
        this.src =
          'https://res.xxwbaby.com/public/agreement/privacy_agree.html'
      }
      this.modalType = type
      this.modalVisible = true
    },
    showPwd () {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push('/')
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

$bg: rgba(238, 238, 241, 1);
$dark_gray: #889aa4;
$light_gray: #eee;
// .login_bg {
//   // background: url("../../../assets/loginbg.png") 100% 100% no-repeat;
//   // background-position: 10% 40%;
//   // background-size: cover;
// }
::v-deep .el-form-item__label:before {
  display: none !important;
}
::v-deep .el-input__inner:focus {
  border-color: #ff4949 !important;
}
::v-deep .el-form-item__label {
  font-weight: bold;
}

::v-deep .el-input__inner {
  padding-left: 40px;
  width: 312px;
  height: 44px;
  border-radius: 5px;
}
.input-img {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
}
.el-form-item {
  display: flex;
  flex-direction: column;
}
.tips {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;

  span {
    &:first-of-type {
      margin-right: 16px;
    }
  }
}

.title-container {
  position: relative;
  text-align: center;
  margin-bottom: 10px;

  .logo {
    width: 240px;
    height: 116px;
  }
}

.verCodeBox {
  width: 100%;
  height: 47px;
  background: #fafafa;
}

.submitBtn {
  width: 320px;
  height: 48px;
  background: rgb(230, 0, 18);
  // @if ($envChannel == "nicemama") {
  //   background: linear-gradient(90deg, #3c4993 0%, #3c4993 100%);
  // } @else if ($envChannel == "zidanedu") {
  //   background: linear-gradient(90deg, #fff 0%, #ffc8e3 100%);
  // } @else {
  //   background: linear-gradient(90deg, #aacd22 0%, #f5ac3c 100%);
  // }
  border-radius: 2px;
  border: none;
}

.rememberPass {
  ::v-deep {
    .el-checkbox__label {
      color: $--color-text-primary;
    }
  }
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}

.thirdparty-button {
  position: absolute;
  right: 0;
  bottom: 6px;
}

@media only screen and (max-width: 470px) {
  .thirdparty-button {
    display: none;
  }
}

.footer {
  color: #707473;
  vertical-align: middle;
}
</style>
